<script setup lang="ts">
import type { Props } from './index.d'
// ------------------静态变量------------------
// #region

withDefaults(defineProps<Props>(), {
  fluctuation: 10,
})

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region

// #endregion
</script>

<template>
  <div
    class="logo"
    :style="{
      '--logo-fluctuation': `${fluctuation}deg`,
    }"
  >
    <div class="border-box width-fill rotateBox">
      <img :src="svg" class="width-fill" alt="登录图片">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  --logo-fluctuation: 10deg;
  --logo-degZMiddle: 180deg;
  --logo-degZ: 360deg;
  pointer-events: none;
  .rotateBox {
    --degX: 0deg;
    --degZMiddle: calc(0deg - var(--logo-degZMiddle));
    --degZ: calc(0deg - var(--logo-degZ));
    @extend %rotate;
    img {
      --degX: var(--logo-fluctuation);
      --degZMiddle: var(--logo-degZMiddle);
      --degZ: var(--logo-degZ);
      @extend %rotate;
      filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
    }
  }
}
%rotate {
  perspective: 500px;
  transform-style: preserve-3d;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(var(--degX)) rotateZ(var(--degZMiddle));
  }
  100% {
    transform: rotateX(0deg) rotateZ(var(--degZ));
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
